<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">

	
	<title>jQuery treeview</title>
	
	<link rel="stylesheet" href="http://jquery.bassistance.de/treeview/jquery.treeview.css">
	<link rel="stylesheet" href="http://jquery.bassistance.de/treeview/demo/screen.css">
	
	<script src="./jQuery treeview_files/jquery.js" type="text/javascript"></script>
	<script src="./jQuery treeview_files/jquery.cookie.js" type="text/javascript"></script>
	<script src="./jQuery treeview_files/jquery.treeview.js" type="text/javascript"></script>
	
	<script type="text/javascript" src="./jQuery treeview_files/demo.js"></script>
	
	</head>
	<body>
	
	
	<h4>Sample 1 - default</h4> 
	<ul id="browser" class="filetree treeview">
		<li class="collapsable"><div class="hitarea collapsable-hitarea"></div><span class="folder">Folder 1</span>
			<ul>
				<li class="last"><span class="file">Item 1.1</span></li>
			</ul>
		</li>
		<li class="collapsable"><div class="hitarea collapsable-hitarea"></div><span class="folder">Folder 2</span>
			<ul>
				<li class="collapsable"><div class="hitarea collapsable-hitarea"></div><span class="folder">Subfolder 2.1</span>
					<ul id="folder21">
						<li><span class="file">File 2.1.1</span></li>
						<li class="last"><span class="file">File 2.1.2</span></li>
					</ul>
				</li>
				<li class="last"><span class="file">File 2.2</span></li>
			</ul>
		</li>
		<li class="closed expandable"><div class="hitarea closed-hitarea expandable-hitarea"></div><span class="folder">Folder 3 (closed at start)</span>
			<ul style="display: none; ">
				<li class="last"><span class="file">File 3.1</span></li>
			</ul>
		</li>
		<li class="last"><span class="file">File 4</span></li>
	</ul>
	<h4>Sample 2 - Navigation</h4>
	
	<ul id="navigation" class="treeview">
		<li class="expandable"><div class="hitarea expandable-hitarea"></div>Item 1
			<ul style="display: none; ">
				<li class="expandable"><div class="hitarea expandable-hitarea"></div>Item 1.0
					<ul style="display: none; ">
						<li class="last">Item 1.0.0</li>
					</ul>
				</li>
				<li><a href="http://jquery.bassistance.de/treeview/demo/?1.1">Item 1.1</a></li>
				<li class="expandable lastExpandable"><div class="hitarea expandable-hitarea lastExpandable-hitarea"></div><a href="http://jquery.bassistance.de/treeview/demo/?1.2">Item 1.2</a>
					<ul style="display: none; ">
						<li class="expandable"><div class="hitarea expandable-hitarea"></div><a href="http://jquery.bassistance.de/treeview/demo/?1.2.0">Item 1.2.0</a>
						<ul style="display: none; ">
							<li><a href="http://jquery.bassistance.de/treeview/demo/?1.2.0.0">Item 1.2.0.0</a></li>
							<li><a href="http://jquery.bassistance.de/treeview/demo/?1.2.0.1">Item 1.2.0.1</a></li>
							<li class="last"><a href="http://jquery.bassistance.de/treeview/demo/?1.2.0.2">Item 1.2.0.2</a></li>
						</ul>
					</li>
						<li class="expandable"><div class="hitarea expandable-hitarea"></div><a href="http://jquery.bassistance.de/treeview/demo/?1.2.1">Item 1.2.1</a>
						<ul style="display: none; ">
							<li class="last"><a href="http://jquery.bassistance.de/treeview/demo/?1.2.1.0">Item 1.2.1.0</a></li>
						</ul>
					</li>
						<li class="expandable lastExpandable"><div class="hitarea expandable-hitarea lastExpandable-hitarea"></div><a href="http://jquery.bassistance.de/treeview/demo/?1.2.2">Item 1.2.2</a>
						<ul style="display: none; ">
							<li><a href="http://jquery.bassistance.de/treeview/demo/?1.2.2.0">Item 1.2.2.0</a></li>
							<li><a href="http://jquery.bassistance.de/treeview/demo/?1.2.2.1">Item 1.2.2.1</a></li>
							<li class="last"><a href="http://jquery.bassistance.de/treeview/demo/?1.2.2.2">Item 1.2.2.2</a></li>
						</ul>
					</li>
					</ul>
				</li>
			</ul>
		</li>
		<li class="expandable"><div class="hitarea expandable-hitarea"></div><a href="http://jquery.bassistance.de/treeview/demo/?2">Item 2</a>
			<ul style="display: none; ">
				<li class="expandable"><div class="hitarea expandable-hitarea"></div><span>Item 2.0</span>
					<ul style="display: none; ">
						<li class="expandable lastExpandable"><div class="hitarea expandable-hitarea lastExpandable-hitarea"></div><a href="http://jquery.bassistance.de/treeview/demo/?2.0.0">Item 2.0.0</a>
						<ul style="display: none; ">
							<li><a href="http://jquery.bassistance.de/treeview/demo/?2.0.0.0">Item 2.0.0.0</a></li>
							<li class="last"><a href="http://jquery.bassistance.de/treeview/demo/?2.0.0.1">Item 2.0.0.1</a></li>
						</ul>
					</li>
					</ul>
				</li>
				<li class="expandable lastExpandable"><div class="hitarea expandable-hitarea lastExpandable-hitarea"></div><a href="http://jquery.bassistance.de/treeview/demo/?2.1">Item 2.1</a>
					<ul style="display: none; ">
						<li class="expandable"><div class="hitarea expandable-hitarea"></div><a href="http://jquery.bassistance.de/treeview/demo/?2.1.0">Item 2.1.0</a>
						<ul style="display: none; ">
							<li class="last"><a href="http://jquery.bassistance.de/treeview/demo/?2.1.0.0">Item 2.1.0.0</a></li>
						</ul>
					</li>
						<li class="expandable"><div class="hitarea expandable-hitarea"></div><a href="http://jquery.bassistance.de/treeview/demo/?2.1.1">Item 2.1.1</a>
						<ul style="display: none; ">
							<li><a href="http://jquery.bassistance.de/treeview/demo/?2.1.1.0abc">Item 2.1.1.0</a></li>
							<li><a href="http://jquery.bassistance.de/treeview/demo/?2.1.1.1">Item 2.1.1.1</a></li>
							<li class="last"><a href="http://jquery.bassistance.de/treeview/demo/?2.1.1.2">Item 2.1.1.2</a></li>
						</ul>
					</li>
						<li class="expandable lastExpandable"><div class="hitarea expandable-hitarea lastExpandable-hitarea"></div><a href="http://jquery.bassistance.de/treeview/demo/?2.1.2">Item 2.1.2</a>
						<ul style="display: none; ">
							<li><a href="http://jquery.bassistance.de/treeview/demo/?2.1.2.0">Item 2.1.2.0</a></li>
							<li><a href="http://jquery.bassistance.de/treeview/demo/?2.1.2.1">Item 2.1.2.1</a></li>
							<li class="last"><a href="http://jquery.bassistance.de/treeview/demo/?2.1.2.2">Item 2.1.2.2</a></li>
						</ul>
					</li>
					</ul>
				</li>
			</ul>
		</li>
		<li class="expandable lastExpandable"><div class="hitarea expandable-hitarea lastExpandable-hitarea"></div><a href="http://jquery.bassistance.de/treeview/demo/?3">Item 3</a>
			<ul style="display: none; ">
				<li class="open expandable lastExpandable"><div class="hitarea open-hitarea expandable-hitarea lastExpandable-hitarea"></div><a href="http://jquery.bassistance.de/treeview/demo/?3.0">Item 3.0</a>
					<ul>
						<li><a href="http://jquery.bassistance.de/treeview/demo/?3.0.0">Item 3.0.0</a></li>
						<li class="expandable"><div class="hitarea expandable-hitarea"></div><a href="http://jquery.bassistance.de/treeview/demo/?3.0.1">Item 3.0.1</a>
							<ul style="display: none; ">
								<li><a href="http://jquery.bassistance.de/treeview/demo/?3.0.1.0">Item 3.0.1.0</a></li>
								<li class="last"><a href="http://jquery.bassistance.de/treeview/demo/?3.0.1.1">Item 3.0.1.1</a></li>
							</ul>
						</li>
						<li class="expandable lastExpandable"><div class="hitarea expandable-hitarea lastExpandable-hitarea"></div><a href="http://jquery.bassistance.de/treeview/demo/?3.0.2">Item 3.0.2</a>
							<ul style="display: none; ">
								<li><a href="http://jquery.bassistance.de/treeview/demo/?3.0.2.0">Item 3.0.2.0</a></li>
								<li><a href="http://jquery.bassistance.de/treeview/demo/?3.0.2.1">Item 3.0.2.1</a></li>
								<li class="last"><a href="http://jquery.bassistance.de/treeview/demo/?3.0.2.2">Item 3.0.2.2</a></li>
							</ul>
						</li>
					</ul>
				</li>
			</ul>
		</li>
	</ul>
	
	<h4>Sample 3 - fast animations, all branches collapsed at first, red theme, cookie-based persistance</h4>
	<ul id="red" class="treeview-red treeview">
	<li class="expandable"><div class="hitarea expandable-hitarea"></div><span>Item 1</span>
		<ul style="display: none; ">
			<li class="expandable"><div class="hitarea expandable-hitarea"></div><span>Item 1.0</span>
				<ul style="display: none; ">
					<li class="last"><span>Item 1.0.0</span></li>
				</ul>
			</li>
			<li><span>Item 1.1</span></li>
			<li class="expandable lastExpandable"><div class="hitarea expandable-hitarea lastExpandable-hitarea"></div><span>Item 1.2</span>
				<ul style="display: none; ">
					<li class="expandable"><div class="hitarea expandable-hitarea"></div><span>Item 1.2.0</span>
					<ul style="display: none; ">
						<li><span>Item 1.2.0.0</span></li>
						<li><span>Item 1.2.0.1</span></li>
						<li class="last"><span>Item 1.2.0.2</span></li>
					</ul>
				</li>
					<li class="expandable"><div class="hitarea expandable-hitarea"></div><span>Item 1.2.1</span>
					<ul style="display: none; ">
						<li class="last"><span>Item 1.2.1.0</span></li>
					</ul>
				</li>
					<li class="expandable lastExpandable"><div class="hitarea expandable-hitarea lastExpandable-hitarea"></div><span>Item 1.2.2</span>
					<ul style="display: none; ">
						<li><span>Item 1.2.2.0</span></li>
						<li><span>Item 1.2.2.1</span></li>
						<li class="last"><span>Item 1.2.2.2</span></li>
					</ul>
				</li>
				</ul>
			</li>
		</ul>
	</li>
	<li class="expandable"><div class="hitarea expandable-hitarea"></div><span>Item 2</span>
		<ul style="display: none; ">
			<li class="expandable"><div class="hitarea expandable-hitarea"></div><span>Item 2.0</span>
				<ul style="display: none; ">
					<li class="expandable lastExpandable"><div class="hitarea expandable-hitarea lastExpandable-hitarea"></div><span>Item 2.0.0</span>
					<ul style="display: none; ">
						<li><span>Item 2.0.0.0</span></li>
						<li class="last"><span>Item 2.0.0.1</span></li>
					</ul>
				</li>
				</ul>
			</li>
			<li class="expandable lastExpandable"><div class="hitarea expandable-hitarea lastExpandable-hitarea"></div><span>Item 2.1</span>
				<ul style="display: none; ">
					<li class="expandable"><div class="hitarea expandable-hitarea"></div><span>Item 2.1.0</span>
					<ul style="display: none; ">
						<li class="last"><span>Item 2.1.0.0</span></li>
					</ul>
				</li>
					<li class="expandable"><div class="hitarea expandable-hitarea"></div><span>Item 2.1.1</span>
					<ul style="display: none; ">
						<li><span>Item 2.1.1.0</span></li>
						<li><span>Item 2.1.1.1</span></li>
						<li class="last"><span>Item 2.1.1.2</span></li>
					</ul>
				</li>
					<li class="expandable lastExpandable"><div class="hitarea expandable-hitarea lastExpandable-hitarea"></div><span>Item 2.1.2</span>
					<ul style="display: none; ">
						<li><span>Item 2.1.2.0</span></li>
						<li><span>Item 2.1.2.1</span></li>
						<li class="last"><span>Item 2.1.2.2</span></li>
					</ul>
				</li>
				</ul>
			</li>
		</ul>
	</li>
	<li class="open collapsable lastCollapsable"><div class="hitarea open-hitarea collapsable-hitarea lastCollapsable-hitarea"></div><span>Item 3</span>
		<ul>
			<li class="open collapsable lastCollapsable"><div class="hitarea open-hitarea collapsable-hitarea lastCollapsable-hitarea"></div><span>Item 3.0</span>
				<ul>
					<li><span>Item 3.0.0</span></li>
					<li class="expandable"><div class="hitarea expandable-hitarea"></div><span class="">Item 3.0.1</span>
					<ul style="display: none; ">
						<li><span>Item 3.0.1.0</span></li>
						<li class="last"><span>Item 3.0.1.1</span></li>
					</ul>
					
				</li>
					<li class="expandable lastExpandable"><div class="hitarea expandable-hitarea lastExpandable-hitarea"></div><span class="">Item 3.0.2</span>
					<ul style="display: none; ">
						<li><span>Item 3.0.2.0</span></li>
						<li><span>Item 3.0.2.1</span></li>
						<li class="last"><span>Item 3.0.2.2</span></li>
					</ul>
				</li>
				</ul>
			</li>
		</ul>
	</li>
	</ul>
	
	<h4>Sample 4 - two trees with one tree control, black and gray theme, cookie-based persistance</h4>
	<div id="treecontrol" style="display: block; ">
		<a title="Collapse the entire tree below" href="http://jquery.bassistance.de/treeview/demo/#"><img src="./jQuery treeview_files/minus.gif"> Collapse All</a>
		<a title="Expand the entire tree below" href="http://jquery.bassistance.de/treeview/demo/#"><img src="./jQuery treeview_files/plus.gif"> Expand All</a>
		<a title="Toggle the tree below, opening closed branches, closing open branches" href="http://jquery.bassistance.de/treeview/demo/#">Toggle All</a>
	</div>
	<ul id="black" class="treeview-black treeview">
		<li>Item 1</li>
		<li class="collapsable lastCollapsable"><div class="hitarea collapsable-hitarea lastCollapsable-hitarea"></div>
			<span>Item 2</span>
			<ul>
				<li class="collapsable"><div class="hitarea collapsable-hitarea"></div>
					<span>Item 2.1</span>
					<ul>
						<li>Item 2.1.1</li>
						<li class="last">Item 2.1.2</li>
					</ul>
				</li>
				<li>Item 2.2</li>
				<li class="closed expandable lastExpandable"><div class="hitarea closed-hitarea expandable-hitarea lastExpandable-hitarea"></div>
					<span>Item 2.3 (closed at start)</span>
					<ul style="display: none; ">
						<li>Item 2.3.1</li>
						<li class="last">Item 2.3.2</li>
					</ul>
				</li>
			</ul>
		</li>
	</ul>
	<ul id="gray" class="treeview-gray treeview">
		<li>Item 1</li>
		<li class="collapsable"><div class="hitarea collapsable-hitarea"></div>
			<span>Item 2</span>
			<ul>
				<li class="closed expandable"><div class="hitarea closed-hitarea expandable-hitarea"></div>
					<span>Item 2.1 (closed at start)</span>
					<ul style="display: none; ">
						<li>Item 2.1.1</li>
						<li class="last">Item 2.1.2</li>
					</ul>
				</li>
				<li>Item 2.2.1</li>
				<li>Item 2.2.2</li>
				<li>Item 2.2.3</li>
				<li>Item 2.2.4</li>
				<li>Item 2.2.5</li>
				<li>Item 2.2.6</li>
				<li>Item 2.2.7</li>
				<li>Item 2.2.8</li>
				<li class="collapsable"><div class="hitarea collapsable-hitarea"></div>
					<span>Item 2.3</span>
					<ul>
						<li>Item 2.3.1</li>
						<li>Item 2.3.2</li>
						<li>Item 2.3.3</li>
						<li>Item 2.3.4</li>
						<li>Item 2.3.5</li>
						<li>Item 2.3.6</li>
						<li>Item 2.3.7</li>
						<li>Item 2.3.8</li>
						<li class="last">Item 2.3.9</li>
					</ul>
				</li>
				<li class="collapsable lastCollapsable"><div class="hitarea collapsable-hitarea lastCollapsable-hitarea"></div>
					<span>Item 2.4</span>
					<ul>
						<li>Item 2.4.1</li>
						<li>Item 2.4.2</li>
						<li>Item 2.4.3</li>
						<li>Item 2.4.4</li>
						<li>Item 2.4.5</li>
						<li>Item 2.4.6</li>
						<li>Item 2.4.7</li>
						<li>Item 2.4.8</li>
						<li class="last">Item 2.4.9</li>
					</ul>
				</li>
			</ul>
		</li>
		<li class="last">Item 3</li>
	</ul>	
	

</body></html>